
<template>
    <div id="tmpMar">
        <div class="row" v-for="item in datalist" :key="item.id">
            <mt-switch class="switch"></mt-switch>
            <img class="img" :src="item.thumb_path" alt="商品图片">
            <div class="inforight">
                <h4 v-text="item.title"></h4>
                <div class="bottom">
                    <ul>
                        <li>￥{{item.sell_price}}元</li>
                        <li>组件暂存区</li>
                        <li>
                            <a href="javascript:void(0)">删除</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    
        <div id="total">
            <div class="desc">
                <ul>
                    <li>总计（不含运费）</li>
                    <li>已勾选商品1件,总价:￥212元</li>
                </ul>
            </div>
            <div id="button">
                <mt-button type="danger" size="small">去结算</mt-button>
            </div>
        </div>
    </div>
</template>
<script>
import { Toast } from 'mint-ui';
import { getgoodsObject } from '../../kits/localSg.js';

export default {
    data() {
        return {
            datalist: []
        }
    },
    created() {
        this.getdatalist()
    },
    methods: {
        getdatalist() {
            //调用localSg中Object {88: 5, 89: 2}
            var obj = getgoodsObject()
            // 将obj中的id值转化为api传值格式;
            var idlist = '';
            for (var k in obj) {
                idlist += k + ","
            }
            idlist = idlist.slice(0, idlist.length - 1)
            var url = 'http://182.254.146.100:8899/api/goods/getshopcarlist/' + idlist;
            this.$http.get(url).then(function (res) {
                var data = res.body
                if (data.status != 0) {
                    Toast('Upload Complete');
                    return;
                }
                this.datalist = data.message;
            })
        }
    }
}
</script>

<style scoped>
.row {
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    height: 102px;
    display: flex;
    padding: 5px;
}

.switch {
    flex: 0 0 52px;
}

.img {
    margin-left: 5px;
    height: 75px;
    width: 75px;
    flex: 0 0 85px;
}

.inforight {
    margin-left: 5px;
    flex: 1;
}

.inforight ul {
    padding-left: 0px;
}

.inforight li {
    list-style: none;
    display: inline-block;
}

.inforight h4 {
    color: #0094ff;
    font-size: 14px;
}

.bottom li:first-child {
    color: red;
    margin-right: 5px;
}

.bottom li:last-child {
    margin-left: 5px;
}

#total {
    height: 100px;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    padding: 5px;
    ;
}

#total ul {
    padding-left: 0px;
}

#total li {
    list-style: none;
    font-size: 14px;
}

#button {
    flex: 0 0 60px;
    margin: 30px 0 0 0;
}

.desc {

    flex: 1;
}
</style>


